<template>
    <div class="task console">
        <el-table :data="lists" :showPage="false" border ref="table">
            <el-table-column label="登录帐号" width="200" prop="user_name" />
            <el-table-column label="权限" width="200" prop="role_name"/>
            <el-table-column label="当前登录时间" width="200" prop="login_at"/>
	        <el-table-column label="修改登录密码" width="200" prop="password">
		        <template slot-scope="scope">
				        <el-button type="danger" @click="updateModel(scope.row)">修改登录密码</el-button>
		        </template>
	        </el-table-column>
        </el-table>
	    <el-dialog title="修改密码" width="500px" :visible.sync="dvEdit" :before-close="handleClose">
		    <el-form ref="model" :model="model" label-width="80px">
			    <el-form-item label="用户名">
				    <el-input v-model="model.user_name" :disabled="true" placeholder="请输入用户名" style="width:100%"></el-input>
			    </el-form-item>
			    <el-form-item label="密码">
				    <el-input v-model="model.password" placeholder="请输入密码(不填表示不修改密码)" style="width:100%"></el-input>
			    </el-form-item>
		    </el-form>
		    <span slot="footer" class="dialog-footer">
	            <el-button @click="dvEdit = false">取 消</el-button>
	            <el-button type="primary" @click="onSubmit">确 定</el-button>
	        </span>
	    </el-dialog>
    </div>
</template>

<script>
    import {loadApi} from '@/api/loginApi';
    import {updateAdminPassword} from '@/api/admin/adminApi';
    export default {
        data() {
            return {
                lists:[],
                token:localStorage.getItem('token'),
	            dvEdit:false,
	            model:{}
            };
        },
        created:function(){
            this.load();
        },
        methods: {
	        onSubmit:function(){
		        this.$confirm('您确定要对当前登录账号进行密码修改吗？', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        type: 'info'
		        }).then(() => {
			        updateAdminPassword({
				        id: this.model.id,
				        password:this.model.password
			        }).then(res => {
				        if (res.code === 1) {
					        this.$message({
						        message: '操作成功',
						        type: 'success'
					        });
					        this.dvEdit = false;
					        this.load();
				        }
			        })
		        }).catch(() => {
		        })
	        },
	        updateModel:function(row){
	        	console.log(row);
	        	this.model = row;
	        	this.dvEdit = true;
	        },
            load: function () {
                loadApi({
                    token:this.token
                }).then(res => {
                    if(res.code === 1){
                        this.lists = res.data.lists;
                    }else{

                    }
                })
            },
	        handleClose: function (done) {
		        this.$confirm("确认关闭？")
			        .then(_ => {
				        done();
			        })
			        .catch(_ => {
			        });
	        },
        }
    }
</script>

<style lang="scss" scoped>
    .console {
        height: 100%;

        &::-webkit-scrollbar {
            width: 0px !important;
        }

        ::v-deep .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 20px;
            padding: 10px 0;
            border-bottom: 1px solid #F0F0F0;
            position: relative;
            z-index: 999;

            .line-title {
                padding: 0 13px;
                display: flex;
                align-items: center;

                i {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    line-height: 24px;
                    text-align: center;
                    border-radius: 50%;
                    color: #1890FF;
                    background-color: rgb(230, 247, 255);
                    font-size: 15px;
                }

                span {
                    color: #555;
                    font-size: 15px;
                    margin-left: 10px;
                }
            }
        }

        .row {
            display: flex;
            margin-top: 15px;
            background: transparent !important;

            > div {
                margin-right: 15px;
                overflow: hidden;
                background: #fff;
                border-radius: 3px;
                transition: box-shadow .3s;

                &:last-of-type {
                    margin-right: 0 !important;
                }
            }
        }

        .row1, .row2 {
            height: 380px;
        }
    }

    @media only screen and (max-width: $device-notebook) {
        .console {
            .row1 {
                height: 350px;
            }

            .row2 {
                height: 300px;
            }
        }
    }

    @media only screen and (max-width: $device-ipad) {
        .console {

            .row {
                display: block;
                height: auto !important;

                > div {
                    height: 370px;
                }
            }

            .row1 {
                margin-top: 0;
            }
        }
    }
</style>
